<template>
  <div class="login-container">
    <!-- three.js 背景画布（保留原有交互） -->
    <div id="canvascontainer" ref="can" class="bg-canvas"></div>

    <!-- 叠层光晕 -->
    <div class="bg-overlay"></div>

    <!-- 中心卡片 -->
    <div class="login-card">
      <div class="brand">
        <div class="brand-badge">CM</div>
        <div class="brand-text">
          <h1>CoinManager</h1>
          <p>Admin Console</p>
        </div>
      </div>

        <!-- 临时原生调试输入（用于快速验证点击/事件） -->
        <div class="debug-native-login">
          <input v-model="debugUsername" class="dbg-input" placeholder="" />
          <input v-model="debugPassword" class="dbg-input" type="password" placeholder="" />
          <button class="dbg-btn" @click.prevent="debugLogin"> Login</button>
        </div>

        <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules"
               ref="loginForm" label-position="left">
        <el-form-item prop="username">
          <span class="svg-container svg-container_login">
            <svg-icon icon-class="user"/>
          </span>
          <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on"
                    placeholder="用户名"/>
        </el-form-item>

        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password"/>
          </span>
          <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin"
                    v-model="loginForm.password" autoComplete="on" placeholder="密码"/>
        </el-form-item>

        <el-button class="primary-btn" :loading="loading" @click.prevent="handleLogin">
          {{$t('login.logIn')}}
        </el-button>
      </el-form>

      <div class="card-footer">欢迎回来 — 请登录以继续</div>
    </div>
  </div>
</template>

<script>
/* global THREE */
import LangSelect from '@/components/LangSelect'
import SocialSign from './socialsignin'

export default {

  components: { LangSelect, SocialSign },
  name: 'login',
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!isvalidUsername(value)) {
    //     callback(new Error('Please enter the correct user name'))
    //   } else {
    //     callback()
    //   }
    // }
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error('The password can not be less than 6 digits'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      labelText: '获取验证码',
      passwordType: 'password',
      loading: false,
      showDialog: false,
      isdisabled: false
        ,debugUsername: '',
        debugPassword: ''
    }
  },
  methods: {
      debugLogin() {
        // copy debug inputs into the real form and trigger existing handler
        this.loginForm.username = this.debugUsername || this.loginForm.username
        this.loginForm.password = this.debugPassword || this.loginForm.password
        // ensure focus/blur won't block; then call handleLogin
        this.handleLogin()
      },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    handleLogin() {
      console.log('handleLogin triggered', this.loginForm)
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // this.loginForm.password = md5(this.loginForm.password)
          this.$store.dispatch('LoginByUsername', this.loginForm).then((response) => {
            this.loading = false
            this.$router.push({ path: '/' })
            // 这里要做判断 有些角色 没有权限调用此接口
            // trade_coin_query  trade_market_query
            const authorities = response.authorities
            authorities.forEach(item => {
              if (item.authority === 'trade_coin_query') {
                this.$store.dispatch('CoinAll')// 获取所有币种信息
              }
              if (item.authority === 'trade_market_query') {
                this.$store.dispatch('MarketAll')// 获取所有交易市场信息
              }
            })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onGetCode() {
      var countdown = 60
      var text = this

      function settime() {
        console.log('第二层this:' + text)

        if (countdown === 0) {
          text.isdisabled = false
          text.labelText = '获取验证码'
          countdown = 60
          return false
        } else {
          text.isdisabled = true
          text.labelText = countdown + 's'
          countdown--
        }

        setTimeout(function() {
          settime()
        }, 1000)
      }

      settime()
    }
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  mounted() {
    container = document.createElement('div')
    this.$refs.can.appendChild(container)

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
    camera.position.z = 1000

    scene = new THREE.Scene()

    particles = []

    var PI2 = Math.PI * 2
    var material = new THREE.ParticleCanvasMaterial({

      color: 0x0078de,
      program: function(context) {
        context.beginPath()
        context.arc(0, 0, 1, 0, PI2, true)
        context.fill()
      }

    })

    var i = 0

    for (var ix = 0; ix < AMOUNTX; ix++) {
      for (var iy = 0; iy < AMOUNTY; iy++) {
        particle = particles[i++] = new THREE.Particle(material)
        particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2)
        particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2)
        scene.add(particle)
      }
    }

    renderer = new THREE.CanvasRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)
      // Ensure the three.js canvas does not block pointer events on top of the UI
      try {
        container.style.pointerEvents = 'none'
        if (renderer && renderer.domElement) {
          renderer.domElement.style.pointerEvents = 'none'
        }
      } catch (e) {
        // ignore
      }

    document.addEventListener('mousemove', onDocumentMouseMove, false)
    document.addEventListener('touchstart', onDocumentTouchStart, false)
    document.addEventListener('touchmove', onDocumentTouchMove, false)
    //

    window.addEventListener('resize', onWindowResize, false)

    animate()
  },
  destroyed() {
    // window.removeEventListener('hashchange', this.afterQRScan)
  }
}

const SEPARATION = 100
const AMOUNTX = 50
const AMOUNTY = 50

let container
let camera
let scene
let renderer

let particles
let particle
let count = 0

let mouseX = 0
let mouseY = 0

let windowHalfX = window.innerWidth / 2
let windowHalfY = window.innerHeight / 2

// animate();

function onWindowResize() {
  windowHalfX = window.innerWidth / 2
  windowHalfY = window.innerHeight / 2

  if (camera) {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
  }

  if (renderer) {
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
}

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX
  mouseY = event.clientY - windowHalfY
}

function onDocumentTouchStart(event) {
  if (event.touches.length === 1) {
    event.preventDefault()
    mouseX = event.touches[0].pageX - windowHalfX
    mouseY = event.touches[0].pageY - windowHalfY
  }
}

function onDocumentTouchMove(event) {
  if (event.touches.length === 1) {
    event.preventDefault()
    mouseX = event.touches[0].pageX - windowHalfX
    mouseY = event.touches[0].pageY - windowHalfY
  }
}

function animate() {
  requestAnimationFrame(animate)
  render()
}

function render() {
  if (!camera || !scene || !particles || !renderer) return

  camera.position.x += (mouseX - camera.position.x) * 0.05
  camera.position.y += (-mouseY - camera.position.y) * 0.05
  camera.lookAt(scene.position)

  let i = 0

  for (let ix = 0; ix < AMOUNTX; ix++) {
    for (let iy = 0; iy < AMOUNTY; iy++) {
      particle = particles[i++]
      particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50)
      particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2
    }
  }

  renderer.render(scene, camera)
  count += 0.1
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login-container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(180deg, #010414 0%, #071129 100%);
}

.bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(ellipse at 10% 20%, rgba(0,136,255,0.06) 0%, transparent 18%),
                    radial-gradient(ellipse at 90% 80%, rgba(124,58,237,0.05) 0%, transparent 25%),
                    linear-gradient(180deg, rgba(2,6,23,0.18), rgba(2,6,23,0.45));
  mix-blend-mode: screen;
}

.login-card {
  position: relative;
  z-index: 5;
  width: 380px;
  max-width: 92%;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 10px 40px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

.login-card:before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 0deg, rgba(0,180,255,0.28), rgba(124,58,237,0.24), rgba(0,255,183,0.22));
  filter: blur(14px);
  z-index: 0;
  opacity: 0.9;
  animation: glow 8s linear infinite;
  pointer-events: none;
}

.login-card > * { position: relative; z-index: 2; }

.brand { display: flex; align-items: center; margin-bottom: 18px; }
.brand-badge { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, #0078de, #6c5ce7); color: #fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; box-shadow: 0 6px 18px rgba(108,92,231,0.28); margin-right:12px; }
.brand-text h1 { margin: 0; font-size: 20px; color: #eaf6ff; font-weight: 700; }
.brand-text p { margin: 0; color: rgba(234,246,255,0.65); font-size: 12px; margin-top: 4px; }

.login-form { margin-top: 6px; }

.svg-container svg { fill: rgba(200,220,255,0.85); }

.el-input__inner {
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  color: #eaf6ff;
  padding: 10px 14px;
  transition: all .25s;
}

.el-input__inner::placeholder { color: rgba(234,246,255,0.45); }

.el-input__inner:focus {
  box-shadow: 0 6px 20px rgba(92,118,255,0.12);
  border-color: rgba(124,58,237,0.6);
  outline: none;
}

.primary-btn {
  width: 100%;
  background: linear-gradient(90deg,#00b4ff,#6c5ce7);
  border: none;
  color: #fff;
  height: 46px;
  border-radius: 8px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(92,118,255,0.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(92,118,255,0.24); }

.card-footer { margin-top: 12px; text-align: center; color: rgba(234,246,255,0.6); font-size: 12px; }

@keyframes glow { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

/* responsive */
@media (max-width: 500px) {
  .login-card { width: 92%; padding: 20px; border-radius: 12px; }
  .brand-badge { width: 48px; height: 48px; }
}

</style>

/* debug native inputs: polished */
.debug-native-login {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  margin-bottom:18px;
}
.dbg-input {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color: #eaf6ff;
  font-size:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 18px rgba(2,6,23,0.45);
  outline: none;
  transition: box-shadow .18s ease, transform .12s ease;
}
.dbg-input::placeholder { color: rgba(234,246,255,0.42); }
.dbg-input:focus { box-shadow: 0 10px 30px rgba(92,118,255,0.12); transform: translateY(-1px); border-color: rgba(124,58,237,0.6); }
.dbg-btn {
  width: 100%;
  padding:12px 14px;
  border-radius:10px;
  border:none;
  background: linear-gradient(90deg,#00b4ff,#6c5ce7);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 12px 30px rgba(92,118,255,0.16);
  transition: transform .12s ease, box-shadow .12s ease;
}
.dbg-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(92,118,255,0.22); }

/* Card entrance animation */
.login-card { animation: floatIn .6s cubic-bezier(.2,.9,.2,1) both; }
@keyframes floatIn { from { opacity:0; transform: translateY(10px) scale(.995); } to { opacity:1; transform: translateY(0) scale(1); } }

/* Stronger overrides for Element UI inputs inside the card to ensure polished look */
.login-card input,
.login-card .el-input__inner {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
  color: #eaf6ff !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
}
.login-card .el-input__inner::placeholder,
.login-card input::placeholder { color: rgba(234,246,255,0.42) !important; }
.login-card .el-input__inner:focus,
.login-card input:focus { border-color: rgba(124,58,237,0.6) !important; box-shadow: 0 10px 30px rgba(92,118,255,0.12) !important; transform: translateY(-1px); }

/* Style Element button to match primary look */
.login-card .el-button--primary,
.login-card .primary-btn {
  background: linear-gradient(90deg,#00b4ff,#6c5ce7) !important;
  border: none !important;
  color: #fff !important;
  height: 46px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 30px rgba(92,118,255,0.16) !important;
}

/* reduce contrast for labels and small text */
.login-card .title, .login-card .tips, .login-card .card-footer { color: rgba(234,246,255,0.65) !important; }

/* Temporarily hide Element UI form inside the card so our polished native debug inputs are the only visible controls. */
.login-card .el-form { display: none !important; }


